/**
 * 区间收益率
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC, NoDataC, SecondHeaderC } from '../../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin, Row, Col } from 'antd';
import YieldItem from './yieldItem';
import styles from './styles.less';

@Form.create()
class IntervalReturn extends PureComponent {
  state = {
    xAxis: undefined,
    series: undefined,
  };

  componentDidMount() {
    if (this.props.searchData && this.props.searchData.portfolioCode) {
      this.getData(this.props.searchData);

      // 获取组合概览收益率数据
      this.getyieldOrgLevelData({
        portfolioCode: this.props.searchData?.portfolioCode,
        dataDate: this.props.searchData?.endDate,
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(nextProps.searchData);
      // 获取组合概览收益率数据
      this.getyieldOrgLevelData({
        portfolioCode: nextProps.searchData?.portfolioCode,
        dataDate: nextProps.searchData?.endDate,
      });
    }
  }

  componentWillUnmount() {
    // 离开前清除models数据
  }

  // 获取echarts数据
  getData = (searchProps) => {
    this.props.dispatch({
      type: 'yieldPerformanceInProM/getYieldRateData',
      payload: searchProps,
      callback: (type, res) => {
        if (type == 'success') {
          if (res.series && res.series.length) {
            res.series.map((item) => {
              item.toFixed = 2;
            });
          }
          this.setState({
            xAxis: res.xAxis,
            series: res.series,
          });
        }
      },
    });
  };

  // 获取组合概览收益率数据
  getyieldOrgLevelData = (searchProps) => {
    this.props.dispatch({
      type: 'yieldPerformanceInProM/yieldOrgLevel',
      payload: searchProps,
    });
  };

  render() {
    const { series, xAxis } = this.state;
    const {
      yieldPerformanceInProM: { yieldOrgLevelData },
      colorType,
    } = this.props;
    return (
      <div style={{ width: '100%', height: '100%' }}>
        {/* 区间收益率 */}
        <SecondHeaderC title='区间收益率' colorType={colorType} />
        {/* 组合概览的收益率 */}
        <Spin spinning={this.props.loading.effects['yieldPerformanceInProM/yieldOrgLevel'] == true}>
          {yieldOrgLevelData?.length ? (
            <div
              className={colorType == 'darkBlue' ? styles.intervalReturnBgDark : colorType == 'red' ? styles.intervalReturnBgRed : styles.intervalReturnBg}
              style={{ marginBottom: '16px' }}
            >
              <div style={{ display: 'flex', padding: '20px 0 22px 0' }}>
                {yieldOrgLevelData?.map((item, key) => {
                  return <YieldItem data={item.data} title={item.title} colorType={colorType} key={key} />;
                })}
              </div>
            </div>
          ) : (
            <NoDataC />
          )}
        </Spin>
        {/* 收益率表现的收益率 */}
        <div>
          <Spin spinning={this.props.loading.effects['yieldPerformanceInProM/getYieldRateData'] == true}>
            {series?.length > 0 && xAxis?.length > 0 ? (
              <XYAxisChartsC series={series} xAxis={xAxis} height={314} yAxisUnit={['单位(%)']} type='bar' colorType={colorType} />
            ) : (
              <NoDataC />
            )}
          </Spin>
        </div>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceInProM, loading }) => ({
  yieldPerformanceInProM,
  loading,
}))(IntervalReturn);
